<template>
	<view class="page-body ">
		<!-- 提现银行卡 -->
		<view class="flex floor1 ">
			<view class="">提现银行卡</view>
			<view class=" flex bankcard" style="width: auto;" @click="selectCard">
				<image src="/static/img/bank/ccb.png"></image>
				<view class="yourbank">
					<view class="h">{{WDCard.linked_name}}（{{WDCard.cardno_g}}）</view>
					<view class="p">单笔20.0万，单日30.0万</view>
				</view>
				<view class="icon xiangyou"></view>
			</view>
		</view>
		<view class="bank-cont paround40">
			<view class="text">当前账户余额：{{balance}}元</view>
			<view class="login-ipt-wrap flex ">
				<text>¥</text>
				<input type="number" placeholder="请输入提现金额" @input="bindChange" v-model="sum" placeholder-style="color:#c7c7c7"   />
			</view>
			<!-- <view class="p">1个积分可兑换1元人民币，提现免手续费。</view> -->
		</view>
		<!-- 短信验证码 -->
		<!-- <view class="textcode paround40 flex">
			<text>验证码</text>
			<input class="flex1" type="number" placeholder="短信验证码" v-model="textcode" @input="bindCode" />
			<view :class="['btn btn-getcode flex0',isDisabledCode?'disabled':'']" @click="resendCode">{{cdNum}}</view>
		</view> -->
		<view class="paround40">
			<view :class="['button',isNextStep?'primary':'disabled']" :disabled="!isNextStep" @click="nextStep">下一步</view>
		</view>
		<!-- 银行卡下弹框 -->
		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="discard" >
			<!-- 遮罩层 -->
			<view class="mask" @tap="close"></view>
			<view class="layer" @tap.stop="discard">
				<view class="title">选择银行卡付款</view>
				<scroll-view class="content" style="height: 340upx;" scroll-y>
					<radio-group @change="radioChange">
					<label class="radio" v-for="(item,index) in bankcardList" :key="index" @tap="selectbankId=item.id">
						<view class="flex card">
							<view class="key">{{item.linked_name}}</view>
							<view class="value">{{item.linked_acctno}}</view>
								<radio value="" :checked="index==currentidx" color="#f06c7a" class="radio"/>
						</view>
					</label>
					</radio-group>
				</scroll-view>
				<view class="btn">
					<view class="button" @tap="getWDCard">确认</view>
				</view>
				
			</view>
		</view>
		<!-- 提现说明 -->
		<view :class="['state flex',isPopout?'fadein':'']" >
		    <view class="mask" @click="close"></view>
		    <view class="body">
		        <view class="cont">
					<view class="h3">提现说明</view>
					<view class="p">1、当日充值积分，当日不可兑换提现，需到下一个工作日12点后可提现；</view>
					<view class="p">2、1个积分可兑换1元人民币，提现免手续费；</view>
					<view class="p">3、兑换积分＜5万，提现实时到账（不区分节假日）；</view>
					<view class="p">4、兑换积分≥5万，银行办公时间内申请，2小时内提现到账；非银行办公时间申请，下个工作日提现到账；</view>
					<view class="p">5、非工作日申请提现，5万≤兑换积分≤50万，当日到账；兑换积分＞50万，下个工作日到账；</view>
					<view class="p">6、兑换中的积分将先冻结，如兑换失败将返回到账户中，可再次发起兑换；</view>
					<view class="p">7、提现过程如遇问题，请联系客服：0755-86958554。</view>
					<view class="btn" @click="close">知道了</view>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
	var that;
	import {
	    mapState,
	    mapMutations
	} from 'vuex';
	export default{
		data(){
			return{
				sum:"",
				isNextStep:false,
				isGetCode:false,
				balance:"0.00",
				cdNum:"获取验证码",
				isDisabledCode:false,
				isPopout:false,
				textcode:"",
				specClass:"none",
				bankcardList:[],
				currentidx:0,
				selectbankId:"",
				WDCard:""
			}
		},
	
		onLoad(options){
			that=this;
			// this.getbalance();
			var balance = this.balance =  options.withdraw ;
			this.getCard()
		},
		onShow(options){
			this.changeRefresh(false)
		},
		methods:{
			...mapMutations(['changeRefresh']),
			getWDCard(){
				let selectbankId = this.selectbankId;
				let bankcard = this.bankcardList.find(function(item,index){
					return item.id == selectbankId;
				})
				bankcard.cardno_g = bankcard.linked_acctno.replace(/(\d{4})(\d+)(\d{4})/, "$1****$3");
				this.WDCard = bankcard;
				this.close()
			},
			selectCard(){
				this.specClass = 'show';
			},
			getCard(){//获取已绑定列表
				this.$https.POST({
					url:'/pay/lianlianBindcard',
					data:{
					},
					success(res){
						that.bankcardList = res.data;
						that.selectbankId = res.data[0].id;
						let bankcard = res.data[0]
						bankcard.cardno_g = bankcard.linked_acctno.replace(/(\d{4})(\d+)(\d{4})/, "$1****$3");
						that.WDCard = bankcard;
					}
				})
			},
			radioChange(e){
			},
			close(){
				this.isPopout=false;
				this.specClass = "hide";
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			discard(){
			},
			nextStep(e){
				let card  = JSON.stringify(this.WDCard)
				if(this.isNextStep){
					uni.navigateTo({
						url:`/pages/user/SAM/withdraw2?withdrawsum=${this.sum}&card=${card}`
					})
				}
			},
			bindChange(e){
				let value=e.detail.value;
				let balance=parseFloat(this.balance);
				if(parseFloat(value)>balance||value==""){
					this.isNextStep=false
				}else{
					this.isNextStep=true;
				}
			},
			bindCode(e){
				let value=e.detail.value
				let balance=parseInt(this.balance);
				if(parseInt(this.sum)>balance||this.sum==""||value==""){
					this.isNextStep=false
				}else{
					this.isNextStep=true;
				}
			},
			resendCode(){
				countBackwards()
			},
			
		},
		computed:mapState({
			
		}),
		onUnload() {
			this.specClass = 'none'
		},
		onNavigationBarButtonTap(e){
			this.isPopout=true
		},
		onUnload(){
			clearInterval(clock);
		},
		
	}
	// 1分钟倒计时
	var clock;
	function countBackwards() {
	    let nums = 59;
	    let isDisabled = true;
	    let vertifyCode = nums + 's';
	    that.cdNum=vertifyCode;
		that.isDisabledCode=isDisabled;
	    clock = setInterval(function () {
	        nums--;
			// console.log(nums)
	        if (nums > 0) {
	            vertifyCode = nums + 's';
	        } else {
	            clearInterval(clock);
	            isDisabled = false;
	            vertifyCode = '重发验证码';
	            nums = '59'
	        }
	        that.cdNum=vertifyCode;
			that.isDisabledCode=isDisabled
	        // console.log(nums)
	    }, 1000)
	}
</script>

<style lang="scss" scoped="">
	@import '../../../static/css/user.css';
	view{box-sizing: border-box;}
	.page-body{background: #f7f6f8;}
	.floor1{
		justify-content: space-between; height: 130upx; margin-bottom: 20upx; background: #fff; color: #0e1327; padding:0 30upx 0 40upx;
		.bankcard{
			position:relative;
			.xiangyou{font-size: 28upx;}
			image{width:50upx;height:50upx ;margin-right: 15upx;}
		}
	}
	.p{color: #c3c5d1;font-size: 24upx;padding:0;line-height: inherit;}

	.bank-cont{
		background: #fff; margin-bottom: 20upx;
		.text{height: 88upx;line-height: 88upx;color: #535970;}
		.login-ipt-wrap{border-bottom-color:$cut-line-color ;}
		.login-ipt-wrap text{color:#0e1327;font-size: 42upx;}
		.p{height: 80upx;line-height: 80upx;}
	}
	.button{border-radius: 44upx;margin-top: 80upx;}
	.state{
		position: fixed; z-index: -1; opacity: 0; transition: all .2s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 10upx;
			padding:0 20upx 30upx;
		}
		.h3{line-height: 90upx;color: #0e1327;font-size: 34upx;text-align: center;font-weight: bold;}
		.p{font-size: 26upx;color: #535970;line-height: 40upx;padding-top: 10upx;}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:linear-gradient( 0deg, rgb(255,114,1) 0%, rgb(255,129,27) 100%);color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; font-size: 28upx;}
	}
	.state.fadein{
		opacity: 1;z-index: 10;
	}
	.card{line-height: 80upx;height: 80upx; font-size:28upx;position:relative; border-bottom:1px solid #f3f3f3;
		.key{width: 200upx;font-size:28upx;}
		.value{padding-left:10upx ;font-size:26upx;}
		.radio{position: absolute;right: 0;top: 0;}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 20;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -40%;
			width: 100%;
			// 
			height: 40%;
			border-radius: 20upx 20upx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.title{line-height: 60upx;height:60upx;text-align: center;font-size: 30upx;text-align: center;width: 100%;padding-top: 10upx;}
			.content {
				width: 100%;
				padding: 0upx 4% 20upx;
				box-sizing: border-box;
			}
			.btn {
				width: 100%;
				height: 80upx;
				background:#FA3232;
				.button {
					margin-top: 0;
					width: 100%;
					border-radius:0 ;
					font-size: 28upx;
					height: 80upx;
					line-height: 80upx;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-100%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(-100%);
			}
			100% {
				transform: translateY(0);
			}
		}
</style>
